<template>
  <div class="caipu">
    <!-- 头部 -->
    <zj @chuanfuji="zj" class="toubu" />

    <!-- 标题栏 -->
    <!-- 模板 -->
    <van-tabs v-model="active1" class="bt" v-if="yincang">
      <van-tab :title="m.name" v-for="m in arr" :key="m"> </van-tab>
    </van-tabs>

    <!-- 备用模板 -->
    <van-tabs v-model="active1" class="bt" v-else>
      <van-tab :title="nnn" />
    </van-tabs>

    <!-- 内容模块 -->
    <div v-if="active1 === active1" style="margin-top:99px">
      <caipuli :simg="simg" />
    </div>

    <!-- 底部选项卡 --->
    <xrzp-tabbar></xrzp-tabbar>
  </div>
</template>
<script>
import zj from "../../components/Header_bar/index.vue";
import caipuli from "./componentes/caipuli.vue";
import { getCpFlSearch, getCpFlClassid } from "@/apis/modules/cp.fl";
export default {
  components: { caipuli, zj },
  data() {
    return {
      active1: 0,
      search: "",
      arr: [
        { classid: 363, name: "小吃" },
        { classid: 383, name: "月饼" },
        { classid: 312, name: "海鲜" },
        { classid: 382, name: "粽子" },
      ],
      simg: [],
      httpLoading: false, //设置loading的默认初始值,默认状态是关闭状态，所以设置为false
      yincang: true,
      nnn: "",
    };
  },
  mounted() {
    // 请求数据后在mounted调用
    this.getData(363, (list) => {
      this.simg = list;
    });
  },
  methods: {
    zj(val) {
      console.log(`搜索关键字:${val}....`);
      if (val != "") {
        this.yincang = false;
        this.nnn = val;
        (async () => {
          const res = await getCpFlSearch(val);
          this.simg = res.data.result.result.list;
          console.log(res.data.result.result.list);
        })();
        /* ↑ 同上 
        this.axios
          .get(
            `/jisuapi/search?keyword=${val}&appkey=b0e7418fe9bef46dcb47a53374ffbef1`
          )
          .then((result) => {
            console.log(result.data.result.result.list);
            this.simg = result.data.result.result.list;

            // 修改状态
            // this.$store.commit("Search", result.data.result.list);
          });*/
      } else {
        this.yincang = true;
        this.nnn = "";
        this.getData(363, (list) => {
          this.simg = list;
        });
      }
    },

    // 调用getData请求数据
    getData(classid, callback) {
      /*this.axios
        .get(
          `/jisuapi/byclass?classid=${classid}&start=20&num=40&appkey=13e76141171ebe61f22e24477b559988`
        )
        .then((res) => {
          // console.log(res);
          let simg = res.data.result.result.list;
          //用callback把数据返回出去
          callback(simg);
        });*/
      (async () => {
        const res = await getCpFlClassid(classid);
        let simg = res.data.result.result.list;
        callback(simg);
      })();
    },
  },
  // 监听状态
  watch: {
    active1(newval) {
      this.getData(this.arr[newval].classid, (list) => {
        this.simg = list;
        //滚动到顶部
        window.scrollTo(0, 0);
      });
    },
  },
};
</script>
<style scoped>
.toubu {
  position: fixed;
  top: 0;
}
/* 搜索框下边的导航栏 */
.bt {
  position: fixed;
  width: 100%;
  top: 54px;
  z-index: 10;
}
</style>
